import React, {Component} from 'react';
import CommentAdd from '../comment-add/comment-add'
import CommentList from  '../comment-list/comment-list'

class App extends Component {
    // constructor(props) {
    //     super(props)
    //     this.state={
    //         comments:[
    //             {username:'Tom',content:'React挺好的!'}
    //         ]
    //     }
    // }


    //简化写法,给组件对象添加属性，区别于组件类的static
    state = {
        comments: [
            {username: 'Tom', content: 'React挺好的!'}
        ]
    }

    addInfo=(comment)=>{
        let comments=this.state.comments;
        comments.unshift(comment);
        this.setState({comments})
    }

    //删除评论
    delInfo=(index)=>{
        let comments=this.state.comments;
        comments.splice(index,1);
        this.setState({comments})
    }

    render() {
        const {comments}=this.state;
        return (
            <div>
                <header className="site-header jumbotron">
                    <div className="container">
                        <div className="row">
                            <div className="col-xs-12">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd addInfo={this.addInfo}/>
                    <CommentList comments={comments} delInfo={this.delInfo}/>
                </div>
            </div>
        );
    }
}

export default App;